<template>
	<div id="completeRate">
		<div class="breadcrumb">
			<img src="../../../../static/img/attendance_1.png" class="head_img">
			<span class="title" @click="cancel()">考勤记录</span>
			<span>/ 课程完成率</span>
		</div>
		<div class="search">

			<el-select v-model="semester" placeholder="全部学期">
				<el-option v-for="item in semesterLists" :label="item.name" :value="item.id" :key="item.id"></el-option>
			</el-select>

			<el-select v-model="teacher" placeholder="全部老师">
				<el-option v-for="item in teacherLists" :label="item.name" :value="item.id" :key="item.id"></el-option>
			</el-select>

			<el-button class="sel_btn" type="primary" @click="search">筛选</el-button>
		</div>
		<div class="list">
			<div class="list_head">
				<span class="head_name">
					<span>课程完成率</span>
				</span>
				<el-button class="add" type="primary" @click="importData()">导出数据</el-button>
				<el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
			</div>
			<el-table :data="list">
				<el-table-column prop="teacherName" label="老师">
				</el-table-column>
				<el-table-column prop="className" label="课程">
				</el-table-column>
				<el-table-column label="完成/课程总人数">
					<template scope="scope">
						<span>{{scope.row.finishNum}}/{{scope.row.totalNum}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="finishRate" label="完成进度">
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
				 :total="totalCount" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: [],
				unid: '',
				semester: '',
				teacher: 0,
				totalCount: 0,
				currentPage: 1,
				semesterLists: [],
				hasSemester: true,
				teacherLists: [{ id: 0, name: "全部老师" }]
			};
		},
		mounted() {
			this.getSemesterDetail();
			this.getTeacher();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			// 课程完成列表
			getClassComplete() {
				this.list = [];
				let teacherName = "";
				let url = this.$util.domain + "/campusadminapi/v2/attendance/record/classfinishrate/list";
				let name = this.teacherLists.filter(item => {
					return item.id == this.teacher;
				});
				if (this.teacher !== 0) {
					teacherName = name[0].name;
				}

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						pageSize: 10,
						sid: this.semester,
						teacherName: teacherName,
						pageNum: parseInt(this.currentPage)
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let configList = response.data.data.list;
						this.totalCount = response.data.data.totalCount;
						if (configList && configList.length > 0) {
							for (let i = 0; i < configList.length; i++) {
								let $index = i + 1,
									$finishNum = configList[i].finishNum,
									$finishRate = configList[i].finishRate,
									$totalNum = configList[i].totalNum,
									$teacherName = configList[i].teacherName,
									$className = configList[i].className;

								this.list.push({
									index: $index,
									totalNum: $totalNum,
									className: $className,
									finishNum: $finishNum,
									finishRate: $finishRate,
									teacherName: $teacherName
								});
							}
						}
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			// 导出数据
			importData() {
				let teacherName = "";
				let url = this.$util.domain + "/campusadminapi/v2/attendance/record/classfinishrate/export";
				let name = this.teacherLists.filter(item => {
					return item.id == this.teacher;
				});
				if (this.teacher !== 0) {
					teacherName = name[0].name;
				}

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						sid: this.semester,
						teacherName: teacherName
					})
				}).then(response => {
					if (response.data.error == 10000) {
						if (response.data.data.downloadUrl) {
							location.href = response.data.data.downloadUrl;
						}
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			//获取学期列表
			getSemesterDetail() {
				this.semesterLists = [{ id: 0, name: "全部学期" }];
				let url = this.$util.domain + "/campusadminapi/v1/tools/semesters";

				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						// 学期列表
						let semesterList = response.data.data;
						if (semesterList && semesterList.length > 0) {
							this.semesterLists = [];
							this.semester = semesterList[0].sid;
							for (let i = 0; i < semesterList.length; i++) {
								this.semesterLists.push({
									id: semesterList[i].sid,
									name: semesterList[i].semesterName
								});
							}
						} else {
							this.hasSemester = false;
							this.semesterLists = [{ id: 0, name: "全部学期" }];
						}
					}
				});
			},

			// 获取老师列表
			getTeacher() {
				this.teacherLists = [{ id: 0, name: "全部老师" }];
				let url = this.$util.domain + "/campusadminapi/v1/tools/teachers";

				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						// 老师列表
						let teacherList = response.data.data;
						if (teacherList && teacherList.length > 0) {
							this.teacher = teacherList[0].mid;
							this.teacherLists = [{ id: 0, name: "全部老师" }];
							for (let i = 0; i < teacherList.length; i++) {
								this.teacherLists.push({
									id: teacherList[i].mid,
									name: teacherList[i].teacherName
								});
							}
						} else {
							this.teacherLists = [{ id: 0, name: "全部老师" }];
						}
						this.getClassComplete();
					}
				});
			},
			// 搜索
			search() {
				this.getClassComplete();
			},
			cancel() {
				location.href = "/#/attendanceManage";
			},
			// 请求分页数据分页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getClassComplete();
			}
		}
	};
</script>

<style scoped>
	#completeRate {
		padding-top: 60px;
		height: calc(100% - 100px);
	}

	.list {
		height: calc(100% - 160px);
	}

	#completeRate .title {
		color: #0398ff;
	}

	.add {
		position: absolute;
		right: 70px;
	}

	.cancel {
		position: absolute;
		right: 0px;
	}

	.sel_btn {
		position: absolute;
		right: 55px;
		margin-top: 12px;
	}

	#completeRate .search {
		margin: 20px 30px;
		background: #ffffff;
		border-radius: 2px;
		height: 60px;
		line-height: 60px;
		padding: 0 25px;
	}

	#completeRate .el-select {
		display: inline-block;
		width: 20%;
	}
</style>